<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
	body {
		background: #F4F7ED;
		overflow: hidden;
		padding: 0;
	}
	@media screen and (max-width:800px) {
		body {
			background: #F4F7ED;
			overflow: hidden;
			padding: 0;
		}
	}
</style>



<!-- 文档地址 https://getbootstrap.net/docs/components/jumbotron/ -->
<div style="padding:10px;">
	<div class="jumbotron" style="font-size: 14px">
		<h1 class="display-3">Hello , world!</h1>
		<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
		featured content or information.</p>
		<hr class="my-4">
		<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
		<p class="lead">
			<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
		</p>
	</div>
</div>


<script type="text/javascript">
	//获取按钮组件
	var cardbtn=$('.jumbotron .btn');
	cardbtn.click(function(){
		console.log($(this).html());
			//dosomething
	});
</script>